<script setup>
import { CameraOutlined } from '@vicons/antd'
import AddProduct from './components/AddProduct.vue';
import { preregisterRegister, putRepairPreregister, queryPreregisterMessage } from '@/api/Base/preregister';
import { MinusCircleFilled } from '@vicons/antd'
import { showNotify } from 'vant';
import SelectProcurement from '@/components/SelectProcurement.vue';
import ComponentSelector from '@/components/ComponentSelector.vue'
import { uploadFile } from '@/api/Base/file';
import PrinterSelector from '@/components/PrinterSelector.vue'
import { to } from '@/utils/routerUtil';
import { getTestModel } from '@/utils/input';
import EImageList from '@/components/EImageList.vue'
import EImage from '@/components/EImage.vue'

const router = useRouter()
const selectedPrinter = ref()
const printerSelectorRef = ref()
const showPrinterPopup = () => {
  printerSelectorRef.value?.show()
}
definePage({
  name: 'productInput',
  meta: {
    level: 2,
    title: '商品入库',
  },
})

const _addProduct = reactive({
  show: false,
})

const inputData = reactive({
  stepList: ["登记新到", "分类到货", "创建成功"],
  value: 0,
  total: 1,
  type: "",
  showType: false,
  remark: "",
})

const onConfirm = ({ selectedOptions }) => {
  inputData.showType = false;
  console.log(selectedOptions);

  inputData.type = selectedOptions[0].text;
};

const columns = [
  { text: '采购物料', value: 0 },
  { text: '客户送修', value: 1 },
  { text: 'PCB订单', value: 6 },
  { text: '客户退换', value: 2 },
  { text: '外修返回', value: 3 },
  { text: '代工交货', value: 4 },
  { text: '客供料', value: 5 },
  { text: '其他', value: 7 },
];

const ProductInputObj = reactive({
  list: undefined,
  Product: {
    preregisterNo: "",
    photoList: [],
    customerId: "",
    productName: "",
    brand: "",
    serialList: [],
    customerImgList: [],
    faultMessage: "",
    quantity: 0,
    remark: "",
    businessStatus: "正常",
  },
  model: {
    SelectExternalProduct: {
      show: false,
      ExternalProduct: {}
    },
    SelectCustomer: {
      show: false,
      customer: {}
    },
    SelectProcurement: {
      show: false,
      productShow: false,
      Procurement: {},
      product: {} //用于选择料号
    },
    SelectProduct: {
      product: {},
      show: false,
    },
    SelectPCB: {
      show: false,
      PCB: {}
    },
    SelectFix: {
      show: false,
      fix: {}
    },
    SelectBusinessStatus: {
      show: false,
      columns: [
        { text: '正常', value: 1 },
        { text: '保修', value: 2 },
        { text: '走账', value: 3 },
      ]
    }
  }
})

const cur = ref("")
async function scan() {
  const res = await pro.scannerCode()
  cur.value = res
  if (startsWithProduct(cur.value)) {
    queryPreregisterMessage({
      "preNumber": cur.value
    }).then(res => {
      ProductInputObj.list = res.data
      inputData.type = '客户送修'
      ProductInputObj.Product = {
        quantity:res.data.lastRepairRecord.quantity,
        preregisterNo: res.data.sPreregisterNo,
        customerId: res.data.nCustomerId,
        productName: res.data.sProductName,
        brand: res.data.lastRepairRecord.brand,
        serialList: JSON.parse(res.data.lastRepairRecord.serialList),
        faultMessage: res.data.lastRepairRecord.faultMessage,
      }
      inputData.value++
      // ProductInputObj.Product.quantity
    }).catch(err => {
      showNotify({ type: 'danger', message: '查询预登记信息失败' })
    })
  }
}
async function scanSerial() {
  const res = await pro.scannerCode()
  ProductInputObj.Product.serialList.push(res)
}
async function photo() {
  const base64 = await pro.openCamera();
  //TODO:图片处理
  const data = window.atob(base64);
  const ia = new Uint8Array(data.length);
  for (let i = 0; i < data.length; i++) {
    ia[i] = data.charCodeAt(i);
  }
  const file = new File([ia], "打标.png", { type: "image/png" });
  uploadFile(file).then(res => {
    if (res.code == 0) {
      ProductInputObj.Product.photoList.push(res.data.fileid)
    }
  })
}


function startsWithProduct(s) {
  return s.startsWith("Y");
}

const customerFullName = computed(() => {
  return ProductInputObj.model.SelectCustomer.customer.companySName + ProductInputObj.model.SelectCustomer.customer.sNameCn;
})
const load = ref(false)
const sn = ref("")
function addSN() {
  ProductInputObj.Product.serialList.push(sn.value)
  sn.value = ""
}
</script>

<template>
  <div class="py-70 px-20 flex flex-col gap-10">
    <div name="步骤条" class="setpbar">
      <StepBar :step-list="inputData.stepList" :value="inputData.value"></StepBar>
    </div>

    <!-- 第一步 -->
    <div v-if="inputData.value == 0" name="添加产品" class="rounded-[10px] shadow-2xl py-[20px] mb-[30px]">
      <div class="flex relative flex-row justify-between card-head px-[20px]">
        <h1 class="add-product-h1">选择物品</h1>
        <img @click="scan()" block class="absolute right-10 top-10" width="16" height="16" src="/input/扫码.png" />
      </div>

      <div v-if="ProductInputObj.Product.photoList.length == 0" name="仓库项目"
        class="flex flex-col w-[100%] h-[100%] items-center justify-center">
        <div name="没有物品时" class="flex flex-col min-h-[250px] items-center justify-center">
          <img @click="photo()" block width="120" height="100" src="/input/拍照.png" />
          <h3 class="text-[14px] text-coolGray">拍摄预登记物品,维修类型有登记号使用扫码</h3>
          <!-- <van-uploader :after-read="afterRead" /> -->
        </div>

        <div v-if="load" name="搜索中" class="flex flex-col min-h-[250px] items-center justify-center">
          <van-loading vertical>
            <template #icon>
              <van-icon name="star-o" size="30" />
            </template>
            加载中...
          </van-loading>
        </div>
      </div>
      <div v-if="ProductInputObj.Product.photoList.length != 0" class="flex flex-col w-[100%] h-[100%] relative p-10">
        <EImageList v-model:photoList="ProductInputObj.Product.photoList" />
        <van-stepper :min="0" class="absolute bottom-0 right-10px" v-model="ProductInputObj.Product.quantity" />
      </div>

      <ProductItem v-model:cur="cur" v-model:list="ProductInputObj.list" v-if="cur != ''" :type="'edit'" :product="{
        id: 1,
        name: ProductInputObj.list.sProductName,
        description: ProductInputObj.list.company.sName + '-' + (ProductInputObj.list.customer.sNameCn ? ProductInputObj.list.customer.sNameCn : ProductInputObj.list.customer.sNameEn),
        categories: ['维修',],
        quantity: ProductInputObj.list.nPreregisterNum,
        sPhotoUrl: ProductInputObj.list.sPhotoUrl
      }"></ProductItem>

      <StepBottom class="flex items-center justify-center" v-model="inputData">
        <VanButton :disabled="ProductInputObj.Product.photoList.length == 0 && cur == ''" color="#235EFF"
          class="bg-[#235EFF] color-[#235EFF] w-100% text-white" @click="() => {

            console.log(inputData.value++);
            console.log(inputData.value);
          }">下一步</VanButton>
      </StepBottom>
    </div>

    <!-- 第二步 -->
    <div v-if="inputData.value == 1" name="分类" class="h-[70vh] overflow-y-scroll">
      <van-field class="rounded-[10px] h-[60px] flex items-center" v-model="inputData.type" is-link readonly
        label="来货分类" placeholder="选择分类" @click="inputData.showType = true" />
      <van-popup teleport="#app" v-model:show="inputData.showType" round position="bottom">
        <van-picker :columns="columns" @cancel="inputData.showType = false" @confirm="onConfirm" />
      </van-popup>

      <!-- 没有选择分类 -->
      <StepBottom v-if="inputData.type == ''" v-show="!inputData.showType" v-model="inputData">
        <template #default>
          <div>
            <span class="step-bottom-h2" @click="() => {
              // input.value.step+=1
              console.log(inputData.value--);
              console.log(inputData.value);
              
            }">返回上一步</span>
          </div>

          <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
            preregisterRegister({
              photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
              type: 6,
              orderNo: '',
              customerId: '',
              customerRemark: '',
              count: ProductInputObj.Product.quantity
            }).then(res => {
              if (res.code == 0) {
                inputData.value++
                ProductInputObj.Product.preregisterNo = res.data.preregisterNo
              }else{
                showNotify({ type: 'danger', message: res.message })
              }
            })

          }">确认创建</el-button>
        </template>
      </StepBottom>

      <div v-if="inputData.type == '客户送修'" name="预登记号维修送回" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectCustomer.customer.companySName" is-link readonly label="绑定客户"
          placeholder="客户" @click="ProductInputObj.model.SelectCustomer.show = true" />
        <SelectCustomer v-model:customer="ProductInputObj.model.SelectCustomer.customer"
          v-model:show="ProductInputObj.model.SelectCustomer.show" />
        <van-field class="rounded-[10px] h-[60px] flex items-center" v-model="ProductInputObj.Product.productName"
          label="设备名称" placeholder="请输入" />
        <van-field class="rounded-[10px] h-[60px] flex items-center" v-model="ProductInputObj.Product.brand"
          label="品牌名称" placeholder="请输入" />
        <van-field class="rounded-[10px] h-[60px] flex items-center" v-model="ProductInputObj.Product.businessStatus"
          is-link readonly label="业务状态" placeholder="请输入"
          @click="ProductInputObj.model.SelectBusinessStatus.show = true" />
        <van-popup v-model:show="ProductInputObj.model.SelectBusinessStatus.show" round position="bottom">
          <van-picker :columns="ProductInputObj.model.SelectBusinessStatus.columns"
            @cancel="ProductInputObj.model.SelectBusinessStatus.show = false" @confirm="({ selectedOptions }) => {
              ProductInputObj.model.SelectBusinessStatus.show = false
              ProductInputObj.Product.businessStatus = selectedOptions[0].text
            }" />
        </van-popup>

        <div class="bg-white p-[10px] min-h-[150px] rounded-[10px]">
          <van-field class="rounded-[10px]" @blur="addSN" v-model="sn" label="序列号" placeholder="扫码">
            <template #button>
              <div>
                <img @click="scanSerial()" block width="16" height="16" src="/input/扫码.png" />
              </div>
            </template>
          </van-field>
          <div class="flex flex-row h-20 items-center px-10" v-for="(item, index) in ProductInputObj.Product.serialList"
            :key="index">
            <MinusCircleFilled @click="() => {
              ProductInputObj.Product.serialList.splice(index, 1)
            }" class="w-16 h-16 c-[#ff4000]" />{{ item }}
          </div>

        </div>
        <van-field v-model="ProductInputObj.Product.remark" class="rounded-[10px]" rows="2" autosize
          label="客描故障/要求" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit />
        <div class="font-medium mb-2">客户描述截图</div>
        <div class="bg-white rounded-lg p-4 shadow-sm">
          <EImageList v-model:photoList="ProductInputObj.Product.customerImgList" />
        </div>
        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              putRepairPreregister({
                preregisterNumber: ProductInputObj.Product.preregisterNo,
                photoList: ProductInputObj.Product.photoList,
                serialNumber: ProductInputObj.Product.serialList,
                deviceName: ProductInputObj.Product.productName,
                businessStatus: ProductInputObj.Product.businessStatus == '正常' ? 1 : ProductInputObj.Product.businessStatus == '保修' ? 2 : 3,
                brand: ProductInputObj.Product.brand,
                faultMessage: ProductInputObj.Product.faultMessage,
                quantity: ProductInputObj.Product.quantity,
                remark: ProductInputObj.Product.remark,
                customerID: ProductInputObj.model.SelectCustomer.customer.nCustomerId,
              }).then(res => {
                if (res.code == 0) {
                  inputData.value++
                  ProductInputObj.Product.preregisterNo = res.data.preregisterNo
                } else {
                  showNotify({ type: 'danger', message: res.message })
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>

      </div>

      <div v-if="inputData.type == '采购物料'" name="采购物料" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectProcurement.Procurement.sPurchaseNumber" is-link readonly label="绑定采购"
          placeholder="采购单" @click="ProductInputObj.model.SelectProcurement.show = true" />
        <SelectProcurement v-model:show="ProductInputObj.model.SelectProcurement.show"
          v-model:procurement="ProductInputObj.model.SelectProcurement.Procurement" />
          <van-field label="采购备注" :model-value="ProductInputObj.model.SelectProcurement.Procurement.sRemark" readonly />
          <van-field v-if="ProductInputObj?.model?.SelectProcurement?.Procurement?.purchase_record" label="测试方法" :model-value="getTestModel(ProductInputObj?.model?.SelectProcurement?.Procurement?.purchase_record[0]?.nTestModel || 0)" readonly />
          
        <van-divider v-if="!ProductInputObj.model.SelectProcurement.Procurement.sProductNo" content-position="center">分配物料号</van-divider>
        <van-field v-if="!ProductInputObj.model.SelectProcurement.Procurement.sProductNo"
          class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectProcurement.product.sProductNo" is-link readonly label="绑定物料"
          placeholder="选择已有料号" @click="ProductInputObj.model.SelectProcurement.productShow = true" />
        <SelectProduct v-model:product="ProductInputObj.model.SelectProcurement.product"
          v-model:show="ProductInputObj.model.SelectProcurement.productShow" />
        <van-divider v-if="!ProductInputObj.model.SelectProcurement.Procurement.sProductNo" class="blue-300" @click="to('newProduct')" content-position="center">去新建物料号</van-divider>

        <van-field v-model="ProductInputObj.Product.remark" class="rounded-[10px]" rows="2" autosize label="备注"
          type="textarea" maxlength="50" placeholder="请输入备注" show-word-limit />

        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  productNo: ProductInputObj.model.SelectProcurement.Procurement.sProductNo||ProductInputObj.model.SelectProcurement.product.sProductNo||'',
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 3,
                  orderNo: ProductInputObj.model.SelectProcurement.Procurement.sPurchaseNumber,
                  customerId: '',
                  customerRemark: ProductInputObj.Product.remark,
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                  ProductInputObj.Product.preregisterNo = res.data.preregisterNo
                } else {
                  showNotify({ type: 'danger', message: res.message })
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>

      <div v-if="inputData.type == 'PCB订单'" name="PCB订单" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectPCB.PCB.purchasePcbId" is-link readonly label="绑定PCB订单"
          placeholder="PCB订单" @click="() => {
            ProductInputObj.model.SelectPCB.show = true
            // ProductInputObj.model.SelectPCB.PCB = null
          }" />
        <SelectPCB v-model:show="ProductInputObj.model.SelectPCB.show"
          v-model:PCB="ProductInputObj.model.SelectPCB.PCB" />
        <van-field v-model="ProductInputObj.Product.remark" class="rounded-[10px]" rows="2" autosize label="备注"
          type="textarea" maxlength="50" placeholder="请输入备注" show-word-limit />

          <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 7,
                  orderNo: ProductInputObj.model.SelectPCB.PCB.purchasePcbId,
                  customerId: '',
                  customerRemark: ProductInputObj.Product.remark,
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                  ProductInputObj.Product.preregisterNo = res.data.preregisterNo
                } else {
                  showNotify({ type: 'danger', message: res.message })
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>

      <div v-if="inputData.type == '客户退换'" name="客户退换" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center" v-model="ProductInputObj.model.SelectPCB.PCB"
          is-link readonly label="绑定PCB订单" placeholder="PCB订单" @click="() => {
            ProductInputObj.model.SelectPCB.show = true
            // ProductInputObj.model.SelectPCB.PCB = null
          }" />
        <SelectPCB v-model:show="ProductInputObj.model.SelectPCB.show"
          v-model:PCB="ProductInputObj.model.SelectPCB.PCB" />
        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 3,
                  orderNo: ProductInputObj.model.SelectProcurement.Procurement.sPurchaseNumber,
                  customerId: '',
                  customerRemark: '',
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>

      <div v-if="inputData.type == '客供料'" name="客供料" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectCustomer.customer.companySName" is-link readonly label="绑定客户"
          placeholder="客户" @click="ProductInputObj.model.SelectCustomer.show = true" />
        <SelectCustomer v-model:customer="ProductInputObj.model.SelectCustomer.customer"
          v-model:show="ProductInputObj.model.SelectCustomer.show" />
        <!-- {{updatearrive.filter.model.SelectProduct}} -->
        <!-- <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectProduct.product.sProductName" is-link readonly label="绑定物料"
          placeholder="绑定物料" @click="ProductInputObj.model.SelectProduct.show = true" />
        <SelectProduct v-model:product="ProductInputObj.model.SelectProduct.product"
          v-model:show="ProductInputObj.model.SelectProduct.show" /> -->
          <van-divider content-position="center">分配物料号</van-divider>
        <van-field v-if="!ProductInputObj.model.SelectProcurement.Procurement.sProductNo"
          class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectProcurement.product.sProductNo" is-link readonly label="绑定物料"
          placeholder="选择已有料号" @click="ProductInputObj.model.SelectProcurement.productShow = true" />
        <SelectProduct v-model:product="ProductInputObj.model.SelectProcurement.product"
          v-model:show="ProductInputObj.model.SelectProcurement.productShow" />
        <van-divider class="blue-300" @click="to('newProduct')" content-position="center">去新建物料号</van-divider>

        <!-- <ComponentSelector v-if="!ProductInputObj.model.SelectProcurement.Procurement.sProductNo" :levels="5" /> -->

        <van-field v-model="ProductInputObj.Product.remark" class="rounded-[10px]" rows="2" autosize label="备注"
          type="textarea" maxlength="50" placeholder="请输入备注" show-word-limit />

        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 2,
                  productNo: ProductInputObj.model.SelectProcurement.product.sProductNo,
                  // orderNo: ProductInputObj.model.SelectProcurement.Procurement.sPurchaseNumber,
                  customerId: ProductInputObj.model.SelectCustomer.customer.nCustomerId,
                  customerRemark: ProductInputObj.Product.remark,
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                  ProductInputObj.Product.preregisterNo = res.data.preregisterNo
                } else {
                  showNotify({ type: 'danger', message: res.message })
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>

      <div v-if="inputData.type == '代工交货'" name="代工交货" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectExternalProduct.ExternalProduct.externalProductId" is-link readonly
          label="绑定代工" placeholder="代工" @click="ProductInputObj.model.SelectExternalProduct.show = true" />
        <SelectExternalProduct v-model:ExternalProduct="ProductInputObj.model.SelectExternalProduct.ExternalProduct"
          v-model:show="ProductInputObj.model.SelectExternalProduct.show" />
        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 5,
                  orderNo: ProductInputObj.model.SelectExternalProduct.ExternalProduct.externalProductId,
                  customerId: '',
                  customerRemark: '',
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>

      <div v-if="inputData.type == '外修返回'" name="外修送货" class="gap-[10px] flex flex-col py-[20px]">
        <van-field class="rounded-[10px] h-[60px] flex items-center"
          v-model="ProductInputObj.model.SelectFix.fix.repairId" is-link readonly label="绑定维修" placeholder="代工"
          @click="ProductInputObj.model.SelectFix.show = true" />
        <!-- {{ProductInputObj.model.SelectFix.fix.repairId}} -->
        <SelectFix :status="7" v-model:fix="ProductInputObj.model.SelectFix.fix"
          v-model:show="ProductInputObj.model.SelectFix.show" />
        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 4,
                  orderNo: ProductInputObj.model.SelectFix.fix.repairId,
                  customerId: '',
                  customerRemark: '',
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>
      <div v-if="inputData.type == '其他'" name="其他" class="gap-[10px] flex flex-col py-[20px]">
        <van-field v-model="ProductInputObj.Product.remark" class="rounded-[10px]" rows="2" autosize label="备注"
          type="textarea" maxlength="50" placeholder="请输入备注" show-word-limit />

        <StepBottom v-show="!inputData.showType" v-model="inputData">
          <template #default>
            <div>
              <span class="step-bottom-h2" @click="() => {
                // input.value.step+=1
                console.log(inputData.value--);
                console.log(inputData.value);

              }">返回上一步</span>
            </div>

            <el-button class="step-bottom-button flex flex-col justify-center items-center text-white" @click="() => {
              preregisterRegister(
                {
                  photoFileId: JSON.stringify(ProductInputObj.Product.photoList),
                  type: 6,
                  customerRemark: ProductInputObj.Product.remark,
                  count: ProductInputObj.Product.quantity
                }
              ).then(res => {
                if (res.code == 0) {
                  inputData.value++
                  ProductInputObj.Product.preregisterNo = res.data.preregisterNo
                } else {
                  showNotify({ type: 'danger', message: res.message })
                }
              })
            }">确认创建</el-button>
          </template>
        </StepBottom>
      </div>
    </div>

    <div v-if="inputData.value == 2" name="创建成功" class="card flex flex-col items-center gap-[10px] py-[20px]">
      <!-- <van-image class="create-success" src="../../../public/input/创建完成.png" />
      {{ProductInputObj.Product.photoList}} -->
      <EImage :width="'100%'" :height="'100%'" :photo-url="JSON.stringify(ProductInputObj.Product.photoList)" />
      <h2>预登录成功</h2>
      <PrinterSelector ref="printerSelectorRef" :printContent='{
        label: {
          "label_type": "qr",
          "printer": "office",
          "tape": "9mm",
          "fontname": "mono",
          "size": "small",
          "align": "right",
          "qrtext": ProductInputObj.Product.preregisterNo,
          "lines": [
            ProductInputObj.Product.preregisterNo
          ]
        },
        count: 2
      }' v-model="selectedPrinter" />
      <VanButton class="create-h1" @click="showPrinterPopup"> 打印预登录码</VanButton>
      <VanButton class="create-h2" @click='() => {
        inputData.value = 0
        ProductInputObj.list = undefined
        ProductInputObj.Product = {
          photoList: [],
          customerId: "",
          productName: "",
          brand: "",
          serialList: [],
          faultMessage: "",
          quantity: 1,
          remark: "",
          businessStatus: "正常",
          // customerFeedback:""
        }
      }'> 继续预登录</VanButton>
    </div>
  </div>
</template>

<style lang="less" scoped>
.create-success {
  width: 120px;
  height: 110px;
  opacity: 1;
}

.create-h1 {
  width: 240px;
  height: 40px;
  border-radius: 20px;
  opacity: 1;

  box-sizing: border-box;
  /* 主色 */
  border: 1px solid #235EFF;


  font-family: 思源黑体;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  letter-spacing: 0em;

  /* 主色 */
  color: #235EFF;
}

.create-h2 {
  width: 240px;
  height: 40px;
  border-radius: 20px;
  opacity: 1;

  /* 主色 */
  background: #235EFF;

  font-family: 思源黑体;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0em;

  /* 纯白 */
  color: #FFFFFF;
}

.setpbar {
  width: 335px;
  height: 80px;
  border-radius: 10px;
  opacity: 1;
  /* 纯白 */
  background: #FFFFFF;

}


.step-bottom-h2 {

  font-family: 思源黑体;
  font-size: 12px;
  font-weight: normal;
  line-height: 12px;
  letter-spacing: 0em;

  /* 333 */
  color: #333333;
}

.step-bottom-button {
  width: 130px;
  height: 36px;
  border-radius: 18px;
  opacity: 1;

  /* 主色 */
  background: #235EFF;

}

.card {
  width: 335px;
  min-height: 335px;
  border-radius: 10px;
  opacity: 0.6;
  background: #FFFFFF;
}

.card-head {
  border-bottom: 1px solid #E6EAF3;
}

.add-product-h1 {
  height: 2rem;
  opacity: 1;

  font-family: 思源黑体;
  font-size: 16px;
  font-weight: normal;
  line-height: 12px;
  text-align: right;
  letter-spacing: 0em;

  /* 选择商品 */
  color: #363636
}
</style>
